<template>
  <el-card class="box-card">
    <div>
      <!-- 搜索框 -->
      <el-form
        ref="dataFrom"
        :inline="true"
        :model="dataFrom"
        class="demo-form-inline"
      >
        <el-form-item label="档案号：">
          <el-input
            v-model="dataFrom.dah"
            clearable
            placeholder="档案号"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input
            v-model="dataFrom.xm"
            clearable
            placeholder="姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门：">
          <el-select v-model="dataFrom.bm" allow-create clearable default-first-option filterable placeholder="请选择">
            <el-option
              v-for="item in EmployeeSearchOption.bm"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="性别：">
          <el-select v-model="dataFrom.xb" allow-create clearable default-first-option filterable placeholder="请选择">
            <el-option
              v-for="item in EmployeeSearchOption.xb"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!--        <el-form-item label="就职状态：">-->
        <!--          <el-select v-model="dataFrom.jzzt" allow-create clearable default-first-option filterable-->
        <!--                     placeholder="请选择">-->
        <!--            <el-option-->
        <!--              v-for="item in EmployeeSearchOption.jzzt"-->
        <!--              :key="item"-->
        <!--              :label="item"-->
        <!--              :value="item"-->
        <!--            >-->
        <!--            </el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="职务：">
          <el-input
            v-model="dataFrom.zw"
            clearable
            placeholder="职务"
          ></el-input>
        </el-form-item>
        <el-form-item label="民族：">
          <el-select v-model="dataFrom.mz" allow-create clearable default-first-option filterable placeholder="请选择">
            <el-option
              v-for="item in EmployeeSearchOption.mz"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            type="primary"
            @click="getDataListBySearch"
          >查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="dialogFormVisible = true">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="DaoRu_dialogFormVisible = true">导入</el-button>
        </el-form-item>
        <el-form-item v-if="multipleSelection.length>0">
          <el-button type="primary" @click="exportCheck()">
            导出选择
          </el-button>
        </el-form-item>
        <el-form-item v-if="multipleSelection.length>0">
          <el-button type="success" @click="exportAll()">
            导出全部
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 角色数据表单 -->
      <el-table ref="multipleTable" :data="dataList" border style="width: 100%"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column label="档案号" prop="dah" width="80">
        </el-table-column>
        <el-table-column label="姓名" prop="xm" width="130">
        </el-table-column>
        <el-table-column label="部门" prop="bm" width="130">
        </el-table-column>
        <el-table-column label="性别" prop="xb" width="80">
        </el-table-column>
        <el-table-column label="就职状态" prop="jzzt" width="180">
        </el-table-column>
        <el-table-column label="手机号码" prop="sjh" width="130">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleLook(scope.$index, scope.row)"
            >
              查看详情
            </el-button>
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.xh)"
            >删除
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 新增按钮打开的页面 -->
      <el-dialog :visible.sync="dialogFormVisible" title="新增员工" width="50%">
        <el-form ref="form" :model="insertForm" label-width="100px">
          <el-form-item label="姓名">
            <el-input v-model="insertForm.xm"></el-input>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-date-picker v-model="insertForm.csrq_date" placeholder="出生日期" style="width: 100%;"
                            type="date"></el-date-picker>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio v-model="insertForm.xb" label="男"></el-radio>
            <el-radio v-model="insertForm.xb" label="女"></el-radio>
          </el-form-item>
          <el-form-item label="籍贯">
            <el-input v-model="insertForm.jg"></el-input>
          </el-form-item>
          <el-form-item label="现住址">
            <el-input v-model="insertForm.xzz"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="insertForm.sjh"></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="insertForm.sfz"></el-input>
          </el-form-item>
          <el-form-item label="民族">
            <el-input v-model="insertForm.mz"></el-input>
          </el-form-item>
          <el-form-item label="是否签合同">
            <el-radio v-model="insertForm.ht" label="已签"></el-radio>
            <el-radio v-model="insertForm.ht" label="未签"></el-radio>
          </el-form-item>
          <el-form-item label="合同时间">
            <el-col :span="11">
              <el-date-picker v-model="insertForm.htks_date" placeholder="开始时间" style="width: 100%;"
                              type="date"></el-date-picker>
            </el-col>
            <el-col :span="1">-</el-col>
            <el-col :span="12">
              <el-date-picker v-model="insertForm.htjs_date" placeholder="结束时间" style="width: 100%;"
                              type="date"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="部门">
            <el-select v-model="insertForm.bm" allow-create clearable default-first-option filterable
                       placeholder="请选择所在部门">
              <el-option
                v-for="item in EmployeeSearchOption.bm"
                :key="item"
                :label="item"
                :value="item"/>
            </el-select>
          </el-form-item>
          <el-form-item label="职务">
            <el-input v-model="insertForm.zw"></el-input>
          </el-form-item>
          <el-form-item label="毕业学校">
            <el-input v-model="insertForm.byxx" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="专业">
            <el-input v-model="insertForm.zy" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="学历">
            <el-input v-model="insertForm.xl" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="职称及证件">
            <el-input v-model="insertForm.zcjzj" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="招聘来源">
            <el-input v-model="insertForm.zply" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="银行卡号">
            <el-input v-model="insertForm.yhkh" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="银行卡备注">
            <el-input v-model="insertForm.yhkbz" type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleInsert()">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="DaoRu_dialogFormVisible" title="导入员工" width="35%">
        <el-form :model="formChange">
          <el-form-item label="" label-width="120px">
            <el-upload
              :auto-upload="false"
              :before-upload="handleBeforeUpload"
              :file-list="fileList"
              :limit="fileLimit"
              :multiple="true"
              :on-change="handleChangeFile"
              :on-exceed="handleExceed"
              :show-file-list="true"
              action="#"
              drag
              list-type="text"
              name="file"
              style="margin-top: 10px;"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div slot="tip" class="el-upload__tip">只能上传xls,xlsx文件，且不超过{{ this.fileSize }}kb</div>
            </el-upload>
            <el-button type="primary" @click="handleImport()">导 入</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 编辑按钮打开的页面 -->
      <el-dialog
        :visible.sync="dialogFormVisibleChange"
        title="编辑员工"
        width="35%"
      >
        <el-form :model="formChange">
          <el-form-item label="账号" label-width="120px">
            <el-input
              v-model="formChange.username"
              autocomplete="off"
              placeholder="账号"
              style="width: 300px"
            ></el-input>
          </el-form-item>

          <el-form-item label="姓名" label-width="120px">
            <el-input
              v-model="formChange.name"
              autocomplete="off"
              placeholder="姓名"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" label-width="120px">
            <el-input
              v-model="formChange.email"
              autocomplete="off"
              placeholder="邮箱"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号码" label-width="120px">
            <el-input
              v-model="formChange.mobile"
              autocomplete="off"
              placeholder="手机号码"
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item label="描述信息" label-width="120px">
            <el-input
              v-model="formChange.remark"
              style="width: 300px"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleChange = false">取 消</el-button>
          <el-button type="primary" @click="handleChange()">更 新</el-button>
        </div>
      </el-dialog>
      <!-- 查看打开的界面 -->
      <el-dialog
        :model="formLook"
        :visible.sync="dialogFormVisibleLook"
        title="员工详细信息"
        width="50%"
      >
        <el-descriptions title="基础信息">
          <el-descriptions-item label="姓名">
            {{ this.formLook.xm }}
          </el-descriptions-item>
          <el-descriptions-item label="年龄">
            {{ this.formLook.nl }}
          </el-descriptions-item>
          <el-descriptions-item label="出生日期">
            {{ this.formLook.csrq }}
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            {{ this.formLook.xb }}
          </el-descriptions-item>
          <el-descriptions-item label="身份证号">
            {{ this.formLook.sfz }}
          </el-descriptions-item>
          <el-descriptions-item label="手机号">
            {{ this.formLook.sjh }}
          </el-descriptions-item>
          <el-descriptions-item label="民族">
            {{ this.formLook.mz }}
          </el-descriptions-item>
          <el-descriptions-item label="籍贯">
            {{ this.formLook.jg }}
          </el-descriptions-item>
          <el-descriptions-item label="户口所在地">
            {{ this.formLook.hkszd }}
          </el-descriptions-item>
          <el-descriptions-item label="紧急联系人">
            {{ this.formLook.jjlxr }}
          </el-descriptions-item>
          <el-descriptions-item label="紧急联系人电话">
            {{ this.formLook.jjlxrdh }}
          </el-descriptions-item>
        </el-descriptions>
        <!--单独一行-->
        <el-descriptions>
          <el-descriptions-item label="现住址">
            {{ this.formLook.xzz }}
          </el-descriptions-item>
        </el-descriptions>
        <!--单独一行-->
        <el-descriptions>
          <el-descriptions-item label="银行卡号">
            {{ this.formLook.yhkh }}
          </el-descriptions-item>
          <el-descriptions-item label="银行卡备注">
            {{ this.formLook.yhkbz }}
          </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-descriptions title="学历信息">
          <el-descriptions-item label="毕业学校">
            {{ this.formLook.byxx }}
          </el-descriptions-item>
          <el-descriptions-item label="学历">
            {{ this.formLook.xl }}
          </el-descriptions-item>
          <el-descriptions-item label="专业">
            {{ this.formLook.zy }}
          </el-descriptions-item>
          <el-descriptions-item label="职称及证件">
            {{ this.formLook.zcjzj }}
          </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-descriptions title="岗位信息">
          <el-descriptions-item label="档案号">
            {{ this.formLook.dah }}
          </el-descriptions-item>
          <el-descriptions-item label="部门">
            {{ this.formLook.bm }}
          </el-descriptions-item>
          <el-descriptions-item label="职务">
            {{ this.formLook.zw }}
          </el-descriptions-item>
          <el-descriptions-item label="入职日期">
            {{ this.formLook.rzrq }}
          </el-descriptions-item>
          <el-descriptions-item label="离职日期">
            {{ this.formLook.lzrq }}
          </el-descriptions-item>
          <el-descriptions-item label="就职状态">
            {{ this.formLook.jzzt }}
          </el-descriptions-item>
          <el-descriptions-item label="招聘来源">
            {{ this.formLook.zply }}
          </el-descriptions-item>
          <el-descriptions-item label="入场年限">
            {{ this.formLook.rcnx }}
          </el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-descriptions title="合同信息">
          <el-descriptions-item label="合同">
            {{ this.formLook.ht }}
          </el-descriptions-item>
          <el-descriptions-item label="合同开始">
            {{ this.formLook.htks }}
          </el-descriptions-item>
          <el-descriptions-item label="合同结束">
            {{ this.formLook.htjs }}
          </el-descriptions-item>
        </el-descriptions>
      </el-dialog>
      <!-- 页号 -->
      <el-pagination
        :current-page="pageIndex"
        :page-size="pageSize"
        :page-sizes="[5, 10, 20, 50, 100]"
        :total="totalPage"
        layout="total ,sizes,prev,pager,next,jumper"
        style="margin-top: 30px"
        @size-change="sizeChangeHandle"
        @current-change="CurrentChangeHandle"
      >
      </el-pagination>
    </div>
  </el-card>
</template>
<script>
import xlsx from "vform-builds";

export default {
  name: "index",
  data() {
    return {
      username: sessionStorage.getItem("username"),
      multipleSelection: [], //批量操作数组
      dataFrom: {},//搜索
      formLook: {}, //查看
      insertForm: {},//新增
      formChange: {}, //编辑
      dataList: [], //页面展示的数据集合
      EmployeeSearchOption: {},//搜索选项
      fileList: [], //上传文件，以数组方式上传
      fileListed: 0, //上传过的文件
      fileLimit: 5, //文件上传个数限制
      fileSize: 10,//文件限制大小
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      begin: 0,
      end: this.pageSize - 1,
      dialogFormVisible: false, //默认关闭新建员工界面
      DaoRu_dialogFormVisible: false, //默认关闭导入员工界面
      dialogFormVisibleChange: false, //默认关闭编辑员工界面
      dialogFormVisibleLook: false,//默认关闭查看员工界面
      dataListFrom: "getDataList",
    };
  },
  methods: {
    //改变数组大小
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.SizeOrCurrentChangeAfter();
    },
    //改变当前页号
    CurrentChangeHandle(val) {
      this.pageIndex = val;
      this.SizeOrCurrentChangeAfter();
    },
    //在更改数组大小或者页号前，判断数据来源
    SizeOrCurrentChangeAfter() {
      if (this.dataListFrom === "getDataList")
        this.getDataList();
      else this.getDataListBySearch();
    },
    //新增页面的确认键
    handleInsert() {
      if (this.insertForm.csrq_date !== undefined) {
        this.insertForm.csrq = this.insertForm.csrq_date.toLocaleDateString()
      }
      if (this.insertForm.htks_date !== undefined) {
        this.insertForm.htks = this.insertForm.htks_date.toLocaleDateString()
      }
      if (this.insertForm.htjs_date !== undefined) {
        this.insertForm.htjs = this.insertForm.htjs_date.toLocaleDateString()
      }
      const data = {
        pageBo: this.$getPageInfo(this.pageSize, this.pageIndex),
        employee: this.insertForm
      }
      this.$http.post("/employee/insertEmployee", data).then((res) => {
        this.cutDataList(res);
        this.dialogFormVisible = false;
        this.insertForm = []
      });
    },
    //编辑页面的确认键
    handleChange() {
      this.$http.post("/employee/updateUserInfo", this.formChange).then((res) => {
        this.dialogFormVisibleChange = false;
        this.getDataList();
      });
    },
    //将数据分配到数组中
    cutDataList(res) {
      const data = this.$cutPageDataList(res)
      this.dataList = data.dataList
      this.totalPage = data.totalPage
    },
    //查询所有数据
    getDataList() {
      this.dataListFrom = "getDataList";
      const pageInfo = this.$getPageInfo(this.pageSize, this.pageIndex)
      this.$http.post("/employee/getDepartEmployees", pageInfo).then((res) => {
        this.cutDataList(res);
      });
    },
    //查询单条数据
    getDataListBySearch() {
      this.dataListFrom = "getDataListBySearch";
      const data = {
        employee: this.dataFrom,
        pageBo: this.$getPageInfo(this.pageSize, this.pageIndex)
      }
      this.$http.post("/employee/getDepartEmployeeBySearch", data).then((res) => {
        this.cutDataList(res);
      });
    },
    //查看按钮
    handleLook(index, item) {
      this.dialogFormVisibleLook = true;
      this.formLook = item;
    },
    //编辑按钮
    handleEdit(index, item) {
      this.dialogFormVisibleChange = true; //打开编辑员工界面
      //回显数据
      this.formChange = item;
    },
    //删除按钮
    handleDelete(item) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 表示处理的是 删除操作
          const pageInfo = this.$getPageInfo(this.pageSize, this.pageIndex)
          this.$http.post("/employee/deleteEmployee/" + item, pageInfo).then((res) => {
            this.cutDataList(res);
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    //取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //搜索的选择项
    getEmployeeSearchOption() {
      this.$http.post("/employee/EmployeeSearchOption").then((res) => {
        this.EmployeeSearchOption = res
      });
    },
    //上传前的校验
    handleBeforeUpload(file) {
      const uploadTypes = ["xlsx", "xls"];
      const filetype = file.name.replace(/.+\./, "");
      const isRightSize = (file.size || 0) / 1024 / 1024 < this.fileSize;
      if (!isRightSize) {
        this.$message.error("文件大小超过 " + this.fileSize + "MB");
        return false;
      }
      if (uploadTypes.indexOf(filetype.toLowerCase()) === -1) {
        this.$message.warning({
          message:
            "请上传后缀名为xls,xlsx的附件",
        });
        return false;
      }
      return true;
    },
    //文件数量改变
    handleChangeFile(file, fileList) {
      this.fileList = fileList;
    },
    //超出文件个数的回调
    handleExceed() {
      this.$message({
        type: "warning",
        message: "超出最大上传文件数量的限制！",
      });
    },
    //导入的xls传到后端
    handleImport() {
      //上传文件的需要FormData类型;所以要转
      const FormDates = new FormData();
      this.fileList.forEach((val) => {
        FormDates.append("files", val.raw);
      });
      this.$http.post("/import/employee",
        FormDates, {headers: {"Content-Type": "",}}
      ).then(() => {
        this.getDataList();
      });
    },
    //导出全部
    exportAll() {
      this.export([])
    },
    //导出所选
    exportCheck() {
      this.export(this.multipleSelection)
    },
    //表格被点击，添加data数组数据
    handleSelectionChange(data) {
      this.multipleSelection = []
      data.forEach(val => {
        this.multipleSelection.push(val.xh)
      })
    },
    //导出数据生辰exl表格
    export(item) {
      this.$http.post("/employee/export", item).then(res => {
        const filename = "员工信息表.xls"
        // const data = new Uint8Array(res)
        // const wb = xlsx.read(data, { type: 'array' })
        // const sheets = wb.Sheets // 获取文档数据
        // // this.content = this.transformSheets(sheets)

        // window.location.href=res

        // const blob = new Blob([data], {type: 'application/vnd.ms-excel'}); // type这里表示xlsx类型
        // console.log(blob)
        // if (window.navigator.msSaveOrOpenBlob) { //兼容IE10
        //   navigator.msSaveBlob(blob, filename)
        // } else {
        //   const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
        //   const a = document.createElement('a') //创建a标签
        //   a.style.display = 'none'
        //   a.href = href // 指定下载链接
        //   a.download = filename //指定下载文件名
        //   a.click() //触发下载
        //   URL.revokeObjectURL(a.href) //释放URL对象
        // }
        const downloadElement = document.createElement('a');
        // 创建下载的链接
        downloadElement.href = res
        // 下载后文件名
        downloadElement.download = '员工信息表.xls'
        //不让它跳转在当前页面直接下载
        downloadElement.style.display = "none"
        document.body.appendChild(downloadElement)
        downloadElement.click() // 点击下载
        document.body.removeChild(downloadElement) // 下载完成移除元素
      })
    },
  },
  mounted() {
    this.getDataList();
    this.getEmployeeSearchOption();
  },
};
</script>
